<template>
  <div class="forum-main-layout">
    <div class="forum-left">
      <div class="history-section">
        <h3>历史动态</h3>
        <ul class="history-list">
          <li v-for="(item, idx) in history" :key="idx">{{ item }}</li>
          <li v-if="history.length === 0" class="empty">暂无历史动态</li>
        </ul>
      </div>
      <div class="helper-section">
        <h4>发帖须知</h4>
        <ul class="helper-list">
          <li>请文明发言，禁止发布广告。</li>
          <li>内容需健康向上，禁止人身攻击。</li>
          <li>如发现违规，平台有权删除动态。</li>
        </ul>
      </div>
    </div>
    <div class="forum-right">
      <div class="post-card">
        <h2>发布生活动态</h2>
        <form @submit.prevent="handleSubmit" class="forum-post-form">
          <label>上传图片：</label>
          <input type="file" multiple @change="handleFiles" />
          <div class="img-preview" @dragover.prevent @drop="onDrop">
            <div v-for="(img, idx) in preview" :key="img.id" class="img-item" draggable="true" @dragstart="onDragStart(idx)" @dragend="onDragEnd">
              <img :src="img.url" @dblclick="enlarge(img.url)" />
              <span class="img-delete" @click.stop="removeImg(idx)">×</span>
            </div>
            <div v-if="preview.length === 0" class="empty">暂无图片</div>
          </div>
          <textarea v-model="content" placeholder="说点什么吧..." class="post-textarea"></textarea>
          <button type="submit">发布</button>
        </form>
        <div v-if="showImg" class="img-modal" @click="showImg = ''">
          <img :src="showImg" class="img-large" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const content = ref('')
const history = ref(['今天阳光真好！', '分享了一篇好文章。'])
const preview = ref([]) // [{id, url}]
const showImg = ref('')
let dragIdx = null
function handleFiles(e) {
  const files = Array.from(e.target.files)
  const urls = files.map(file => ({ id: Date.now() + Math.random(), url: URL.createObjectURL(file) }))
  preview.value = preview.value.concat(urls)
  e.target.value = '' // 允许连续选择同一张图片
}
function removeImg(idx) {
  preview.value.splice(idx, 1)
}
function enlarge(img) {
  showImg.value = img
}
function onDragStart(idx) {
  dragIdx = idx
}
function onDragEnd() {
  dragIdx = null
}
function onDrop(e) {
  if (dragIdx === null) return
  const target = e.target.closest('.img-item')
  if (!target) return
  const dropIdx = Array.from(target.parentNode.children).indexOf(target)
  if (dropIdx === dragIdx) return
  const moved = preview.value.splice(dragIdx, 1)[0]
  preview.value.splice(dropIdx, 0, moved)
  dragIdx = null
}
function handleSubmit() {
  // 上传逻辑
  alert('动态发布成功')
}
</script>
<style scoped>
.forum-main-layout {
  display: flex;
  gap: 36px;
  max-width: 1100px;
  margin: 40px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 32px rgba(37, 99, 235, 0.10);
  padding: 40px 32px;
}
.forum-left {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1.5px solid #e5e7eb;
  padding-right: 32px;
}
.history-section {
  background: #f7faff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
  padding: 18px 16px 16px 16px;
}
.history-section h3 {
  color: #2563eb;
  font-size: 1.1em;
  margin-bottom: 8px;
}
.history-list {
  padding-left: 18px;
  color: #555;
  font-size: 0.98em;
  margin: 0;
}
.empty {
  color: #aaa;
  margin: 8px 0;
}
.helper-section {
  background: #f1f5ff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
  padding: 18px 16px 16px 16px;
}
.helper-section h4 {
  color: #2563eb;
  font-size: 1em;
  margin-bottom: 6px;
}
.helper-list {
  padding-left: 18px;
  color: #555;
  font-size: 0.98em;
  margin: 0;
}
.forum-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.post-card {
  width: 100%;
  max-width: 420px;
  background: #f7faff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
  padding: 32px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.forum-post-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.post-textarea {
  min-height: 60px;
  resize: vertical;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}
input[type="file"] {
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  padding: 8px;
}
button {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 0;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
}
button:hover {
  background: #1e40af;
}
.img-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 48px;
  margin-bottom: 10px;
}
.img-item {
  position: relative;
  display: inline-block;
  cursor: grab;
}
.img-item:active {
  cursor: grabbing;
}
.img-preview img {
  max-width: 80px;
  border-radius: 6px;
  box-shadow: 0 1px 4px #ccc;
  cursor: pointer;
}
.img-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 4px #c00a;
}
.img-modal {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.img-large {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 4px 32px #0008;
  background: #fff;
}
@media (max-width: 900px) {
  .forum-main-layout {
    flex-direction: column;
    padding: 24px 8px;
  }
  .forum-left {
    width: 100%;
    border-right: none;
    border-bottom: 1.5px solid #e5e7eb;
    padding-right: 0;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  .forum-right {
    align-items: stretch;
    justify-content: flex-start;
  }
}
</style> 